<template>
	<view>
		<view class="head-top">
			<image class="logo" src="/static/logo.png"/>
			<view class="search-container">
				<input type="text" v-model="keywords" placeholder="请输入关键字" value=""/>
				<view @click="sendSearch()"><text class="hd-icon">&#xe70a;</text></view>
			</view>
			<view class="search-icons">
				<text @click="navigateCart()"  class="hd-icon">&#xe600;</text>
				<text @click="go('/pages/index/classify')" class="hd-icon">&#xe696;</text>
			</view>
		</view> 
	</view>
</template>

<script>
	export default{
		data(){
			return{
				keywords:''
			}
		},
		methods:{
			go(url){
				uni.navigateTo({
					url
				})
			},
			sendSearch(){
				if(this.keywords==''){
					uni.showToast({
						title:'请输入产品名字',
						icon:'none'
					})
					return
				}
				uni.navigateTo({
					url:'/pages/goods/index?keyword='+this.keywords
				})
			},
			navigateCart(){
				this.$Shop.navigateCart();
			}
		}
	}
</script>

<style lang="scss" scoped>
	.head-top{
		background: #fff;
		width:100%;
		display: flex;
		justify-content:space-between;
		padding-top:10rpx;
		position:fixed;
		top:0;
		left:0;
		z-index: 999;
		padding-bottom:10rpx;
		border-bottom:1px solid #d1d1d1;
		.search-container{
			border-radius:30rpx;
			display: flex;
			justify-content:flex-start;
			width:310rpx;
			height: 60rpx;
			line-height: 60rpx;
			border:1rpx solid #ccc;
			margin-right:12.5rpx;
			position: relative;
			top:10rpx;
			input{
				height: 100%;
				padding:0 20rpx;
				font-size:23rpx;
			}
			view{
				width:60rpx;
				display: block;
				text-align: center;
				font-size:40rpx;
                margin-right:10rpx;
				.hd-icon{
					color:#ed1475;
					font-size:40rpx;
				}
			}
		}
		.logo{
			width:250rpx;
			height:75rpx;
		}
		.logo-desc{
			width:125rpx;
			height: 62rpx;
			margin-right:12.5rpx;
		}
	}
	.search-icons{
		display: flex;
		justify-content: flex-start;
		align-items: center;
		margin-right:20rpx;
		.hd-icon{
			font-size:40rpx;
			color:#ed1475;
			&:nth-of-type(1){
				margin-right:20rpx;
			}
		}
	}
</style>
